
const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')

//导入在内存中生成html页面的插件
//只要是插件,都一定要放到披露定时节点中去
const htmlWebpackPlugin = require("html-webpack-plugin")

var WebpackDevServer = require("webpack-dev-server");


//
module.exports={
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        filename: 'bundle.js',// 这是指定 输出的文件的名称
        path: path.join(__dirname, './dist'),// 指定 打包好的文件，输出到哪个目录中去

    },
    devServer:{
        open:true,//自动打开浏览器
        port:8080,//设置启动时候的运行端口
        //host:'192.168.199.137',
        contentBase:'src',//指定托管根目录
        hot:true,//启动热更新 热更新第一步
        historyApiFallback: true,
        proxy: {"/api": "http://localhost:8081"}
    },
    plugins: [//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象 热更新第三步
        new htmlWebpackPlugin({//创建一个在内存中生成一个html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面生成内存中的页面
            filename:'index.html'//生成的页面名称



        })
    ],
    module: {//这个节点用于配置第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理css文件的第三方loader

            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理scss文件的第三方loader

            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'},//配置处理图片文件的第三方loader

            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//配置处理字体文件的第三方loader

            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级es语法


            {test:/\.vue$/,use:'vue-loader'}//处理.vue文件的loader

        ]


    },

    resolve:{
        alias:{
            "vue$":'vue/dist/vue.js'
        }
    }
}


